<script lang="ts" setup>
import {ref, reactive,computed} from 'vue';

defineProps({
  msg: String,
});

const count = ref(0);
const open = () => {
  browser.tabs.create({
    url: browser.runtime.getURL("/sidepanel.html"),
    active: true,
  });
}




const setCount = () => {
  count.value += 10
  storage.setItem("local:count", count.value + 10);
}
let fetchRes = reactive({
  res:{}
})
const getFetch = () => {
  fetch("https://img-home.csdnimg.cn/data_json/jsconfig/redPacket.json").then(res => res.json()).then(res => fetchRes.res = res)
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="setCount">count is {{ count }}</button>
  </div>
  <div class="card">
    <button type="button" @click="open">open tabs</button>
  </div>
  <div class="card">
    <button type="button" @click="getFetch">fetch</button>
    {{ fetchRes.res }}
  </div>
  <br/>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
